<template>
	<el-dialog
		:visible="true"
		width="70%"
		:destroy-on-close="true"
		class="rempadding"
		:before-close="handleClose"
	>
		<div slot="title" class="dialog-title">
			<span class="title-text" style="margin-right: 15px">
				{{ rowVal.proxyAccount }}
			</span>
		</div>
		<el-table
			size="mini"
			border
			show-summary
			:data="tableData"
			class="small-size-table"
			style="margin-bottom: 15px"
			:header-cell-style="getRowClass"
			element-loading-spinner="el-icon-loading"
			:summary-method="
				(val) => handleDialogRow(val, rowVal.currency, subSummary)
			"
		>
			<el-table-column
				prop="billMonth"
				align="center"
				:label="$t('report.commission_month')"
			></el-table-column>

			<el-table-column
				v-if="rowVal.flag"
				prop="proxyName"
				align="center"
				:label="$t('report.pay_proxyName')"
			></el-table-column>
			<el-table-column
				v-else
				prop="proxyName"
				align="center"
				:label="$t('common.direct_superior')"
			>
				<template slot-scope="scope">
					{{ scope.row.proxyName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				v-if="rowVal.flag"
				prop="payment"
				align="center"
				:label="$t('report.payment')"
			>
				<template slot-scope="scope">
					{{ handleCurrency(scope.row.currency) }}
					{{ handleNumber(scope.row.currency, scope.row.payable) }}
				</template>
			</el-table-column>
			<el-table-column
				v-else
				prop="paymentCommission"
				align="center"
				:label="$t('report.payment_commission')"
			>
				<template slot-scope="scope">
					{{ handleCurrency(scope.row.currency) }}
					{{ handleNumber(scope.row.currency, scope.row.payable) }}
				</template>
			</el-table-column>
			<el-table-column
				v-if="rowVal.flag"
				prop="realPCommission"
				align="center"
				:label="$t('report.realp_commission')"
			>
				<template slot-scope="scope">
					{{ handleCurrency(scope.row.currency) }}
					{{ handleNumber(scope.row.currency, scope.row.payment) }}
				</template>
			</el-table-column>
			<el-table-column
				v-else
				prop="realRCommission"
				align="center"
				:label="$t('report.realr_commission')"
			>
				<template slot-scope="scope">
					{{ handleCurrency(scope.row.currency) }}
					{{ handleNumber(scope.row.currency, scope.row.payment) }}
				</template>
			</el-table-column>
			<el-table-column
				v-if="rowVal.flag"
				prop="notPayAmount"
				align="center"
				:label="$t('report.not_pay_amount')"
			>
				<template slot-scope="scope">
					<span style="color:#D9001B">
						{{ handleCurrency(scope.row.currency) }}
						{{ handleNumber(scope.row.currency, scope.row.unpay) }}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-else
				prop="totalChildCommissionAmount"
				align="center"
				:label="$t('report.total_child_commission_amount')"
			>
				<template slot-scope="scope">
					<span style="color:#D9001B">
						{{ handleCurrency(scope.row.currency) }}
						{{ handleNumber(scope.row.currency, scope.row.unpaid) }}
					</span>
				</template>
			</el-table-column>
		</el-table>
		<div slot="footer" class="dialog-footer">
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size.sync="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</div>
	</el-dialog>
</template>
<script>
import list from '@/mixins/list'
import summaryList from './summaryList'
export default {
	mixins: [list, summaryList],
	props: {
		rowVal: {
			type: Object,
			default: () => {}
		},
		closeDialog: {
			type: Function,
			default: () => {}
		}
	},
	data() {
		return {
			loading: false,
			tableData: [],
			subSummary: {}
		}
	},
	methods: {
		loadData() {
			this.loading = true
			const httpStr = this.rowVal.flag
				? 'getReportProxyCommissionDebtsList'
				: 'getReportProxyCommissionReceivableList'
			this.$api[httpStr]({
				...this.rowVal,
				pageNum: this.pageNum,
				pageSize: this.pageSize
			})
				.then((res) => {
					this.loading = false
					this.tableData = res?.data?.record || []
					this.total = res?.data?.totalRecord || 0
					this.subSummary = res?.data?.summary || {}
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleClose() {
			this.closeDialog(false)
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
::v-deep .el-table__body-wrapper {
	overflow-y: auto;
	max-height: 45vh;
}
</style>
